<template>
	<div class="recommendContainer">
		<swiper class="bannerSwiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item  class="banner-item">
				<image class="banner-image" src="https://yanxuan.nosdn.127.net/aaa268b981a1e4248b31dcfeac949a18.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
			</swiper-item>
			<swiper-item class="banner-item">
				<image class="banner-image" src="https://yanxuan.nosdn.127.net/9c21c92a535d8a53e4764f98cdfcdb75.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
			</swiper-item>
			<swiper-item class="banner-item">
				<image class="banner-image" src="https://yanxuan.nosdn.127.net/6fa8212361061d30137587425e7c0c30.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="policyDescList">
			<view class="desc" v-for="desc in indexData.policyDescList" :key="desc.icon">
				<image class="descImg" :src="desc.icon" mode=""></image>
				<text class="descTitle">{{desc.desc}}</text>
			</view>			

		</view>
		<view class="kingKongList">
			<view class="kingKongListItem" v-for="item in indexData.kingKongModule.kingKongList" :key="item.L1Id" >
				<image class="kingKongListItemImg" :src="item.picUrl" mode=""></image>
				<text class="kingKongListDesc">{{item.text}}</text>
			</view>
		</view>
		<categorys v-for="categoryObj in indexData.categoryModule" :key="categoryObj.titlePicUrl" :categoryObj="categoryObj"></categorys>
	</div>
</template>

<script>
	import Categorys from '../categorys/categorys.vue'
	import {mapState} from 'vuex'
	export default{
		components:{
			Categorys
		},
		data(){
			return{
				
			}
		},
		computed:{
			...mapState({
				indexData:state=>state.home.indexData,
			})
		}
	}
</script>

<style lang="stylus">
	.recommendContainer
		.bannerSwiper
			height 350upx
			.banner-item
				.banner-image
					width 100%
					height 100%
		.policyDescList
			display flex
			justify-content space-between
			padding 0 30upx
			.desc
				.descImg
					width 32upx
					height 32upx
					vertical-align middle
				.descTitle
					font-size 24upx
					vertical-align middle
		.kingKongList
			display flex
			flex-wrap wrap
			margin-top 20upx
			.kingKongListItem
				display flex
				flex-direction column
				//行对齐,将父元素分为多行,并且每行元素在对应行内居中
				align-items center
				//块对齐,将所有元素作为一个整体,在父元素中居中
				//align-content
				width 20%
				.kingKongListItemImg
					width 110upx
					height 110upx
				.kingKongListDesc
					font-size 24upx
</style>
